<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        *{
            margin: 0 auto;
            box-sizing: border-box;
        }
        body {
            width: 600px;
            text-align: center;
            background-color: rgb(207, 177, 235);
        }

        ul {
            list-style-type: none;
            border: 2px solid rgb(255, 0, 0);
            padding: 10px;
            font-size: 20px;
        }

        li {
            display: inline;
            padding: 5px;
        }

        li a {
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        li a:link {
            color: rgb(255, 255, 255);
        }

        li a:visited {
            color: rgb(255, 255, 255);
        }

        li a:hover {
            color: red;
        }

        li a:active {
            color: blue;
            padding: 20px;
        }
        div{
            display: inline-blocks;
        }
    </style>

</head>

<body>
    <div>
        <h1>有声相册</h1>
    </div>
    <br>

    <body>
        <ul>
            <li><a href="#C" target="_blank">美女</a></li>
            <li><a href="#C1" target="_blank">型男</a></li>
            <li><a href="#C2" target="_blank">科学家</a></li>
            <li><a href="#C3" target="_blank">企业家</a></li>
            <li><a href="./css/404.jpg" target="_blank">关于</a></li>
        </ul>
    </body>
    <hr>

    <div>
        <div>
            <h2><a id="C"></a>美女</h2>
            <a href="./css/美女.html">
                <img src="./css/小姐姐.webp" alt="小姐姐" width="200px" title="xiaojiejie">
                <img src="./css/image.png" width="240px">
            </a>
        </div>
        <div>
            <h2><a id="C1"></a>型男</h2>
            <a href="./css/型男.html">
                <img src="./css/型男.jpg" alt="型男" width="200px">
            </a>
        </div>
        <div>
            <h2><a id="C2"></a>科学家</h2>
            <a href="./css/科学家.html">
                <img src="./css/科学家.jpg" alt="科学家" width="200px">
            </a>
        </div>
        <div>
            <h2><a id="C3"></a>企业家</h2><a href="./css/企业家.html">
                <img src="./css/企业家.jpg" alt="企业家" width="200px">
            </a>
        </div>
        <div>
            <strong>禁止copy，网图，侵删（作者：罗乐）</strong>
        </div>
    </div>
    <!-- <div>
        <a href="./biaogeindex.html">表格</a>
    </div> -->
</body>

</html>